export default class MyEchars {
    // 创建和初始化在类中创建的对象
    constructor(_echart) {
        this._echart = _echart //引入Echarts
        this._ele = null
        this.myChart=null
    }
    // 极坐标 注意：数据排序 从里往外
    createYiZouShiyong = (_ele, _xData, _yData, _max) => {
        // console.log(_xData,_yData,_max)
        this.disposeChart()
        this._ele = _ele
        var myChart = this._echart.init(this._ele) //初始化
        let colorList = [new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                offset: 0,
                color: '#00fdff'
            },
            {
                offset: 0.2,
                color: '#04f8ff'
            },
            {
                offset: 0.5,
                color: '#0ccfff'
            },
            {
                offset: 0.8,
                color: '#11b8ff'
            },
            {
                offset: 1,
                color: '#0db7ff'
            }
        ]), new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                offset: 0,
                color: '#97c656'
            },
            {
                offset: 0.2,
                color: '#96c553'
            },
            {
                offset: 0.5,
                color: '#7fbb25'
            },
            {
                offset: 0.8,
                color: '#7aba1e'
            },
            {
                offset: 1,
                color: '#7bbe23'
            }
        ]), new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                offset: 0,
                color: '#ff8800'
            },
            {
                offset: 0.3,
                color: '#fa9e00'
            },
            {
                offset: 0.4,
                color: '#ffbf00'
            },
            {
                offset: 0.7,
                color: '#fed000'
            },
            {
                offset: 1,
                color: '#f9ce03'
            }
        ]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#f5c300'
            },
            {
                offset: 0.1,
                color: '#f9bf13'
            },
            {
                offset: 0.2,
                color: '#e38350'
            },
            {
                offset: 0.3,
                color: '#df7460'
            },
            {
                offset: 0.4,
                color: '#db7164'
            },
            {
                offset: 0.5,
                color: '#d86a6b'
            },
            {
                offset: 0.6,
                color: '#c3478f'
            },
            {
                offset: 0.7,
                color: '#a83e98'
            },
            {
                offset: 1,
                color: '#6926b3'
            }
        ])]
        let visualMapPiecesData = []
        for (var i = 0; i < _xData.length; i++) {
            visualMapPiecesData.push({
                value: _yData[i],
                // label: xData[i]+"—"+yData[i],
                color: colorList[i]
            })
        }
        var option = {
            angleAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                clockwise: false,
                max: _max,
                startAngle: 45,
            },
            radiusAxis: {
                type: 'category',
                data: _xData,
                z: 100,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            polar: {
                radius: [42, 112] //总体的最小半径，最大半径
            },
            tooltip: {},
            visualMap: {
                // show:false,
                type: "piecewise",
                top: 10,
                left:10,
                itemSymbol: 'circle',
                textStyle: {
                    color: '#ffffff'
                },
                pieces: visualMapPiecesData,
                outOfRange: {
                    color: '#e4127d'
                }
            },
            series: [{
                type: 'bar',
                data: _yData,
                coordinateSystem: 'polar',
                roundCap: true, //柱状图末端呈现圆角  
                barWidth: "18",
                showBackground: true,
                backgroundStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                            offset: 0,
                            color: '#1f143f'
                        },
                        {
                            offset: 0.5,
                            color: '#381d6c'
                        },
                        {
                            offset: 1,
                            color: '#5426a0'
                        }
                    ])
                },
            }]
        }

        myChart.setOption(option)
    }

    //安装数量
    createInstallNumber = (_ele, _xData, _yData) => {
        this._ele = _ele
        this.disposeChart()
        var myChart=null
        myChart = this._echart.init(this._ele) //初始化
        var option = {
            grid: {
                top: '13%',
                left: '44'
            },
            xAxis: {
                type: 'category',
                data: _xData,
                axisLine: {
                    lineStyle: {
                        color: '#673fb9' //x轴的颜色
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show:true,
                    lineStyle: {
                        color: '#673fb9' //y轴的颜色 
                    }
                },
                splitLine: {
                    show: false
                }
            },
            series: [{
                data: _yData,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: '#2e1f5a',
                    borderRadius: [10, 10, 0, 0]
                },
                itemStyle: {
                    // color:"#f7e239",
                    // 渐变处理
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#06ffff'
                        },
                        {
                            offset: 0.5,
                            color: '#0adaff'
                        },
                        {
                            offset: 1,
                            color: '#10c4f9'
                        }
                    ]),
                    borderRadius: [10, 10, 0, 0]
                },
                barWidth: "15"
            }]
        };
        option && myChart.setOption(option,true);
    }

    //本月安装数量
    thisMouthInstallNumber = (_ele, _xData, _yData) => {
        this.disposeChart()
        this._ele = _ele
        var myChart = this._echart.init(this._ele) //初始化
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: (params) => {
                    //console.log(params[0].name,params[0].value);
                    return '日期：' + params[0].name + '<br>安装：' + params[0].value + '台'
                },
                textStyle: {
                    color: '#ddaf25'
                },
                // extraCssText:'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
                backgroundColor: 'rgba(7,2,24,0.8)',
                borderWidth: 0,
                extraCssText: 'height:40px;width:140px;border-radius:25px;padding-top:5px;padding-left:20px;'
            },
            xAxis: {
                type: 'category',
                data: _xData,
                axisPointer: {
                    show: true,
                    type: 'shadow'
                },
                show: false
            },
            yAxis: {
                type: 'value',
                // 分割线
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#392968']
                    },
                    //width:35        
                },
                // 刻度线设置
                axisLabel: {
                    color: '#6c3abd',
                    inside: true,
                    margin: -10,
                    formatter: '{value}\n'
                }
            },
            // 上下左右间距
            grid: {
                top: '13%',
                bottom: '13%',
                left:'24'
            },
            series: [{
                data: _yData,
                type: 'line',
                smooth: true,
                lineStyle: {
                    // color:"#2db5dd",
                    color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                            offset: 0,
                            color: '#243d66'
                        },
                        {
                            offset: 0.5,
                            color: '#2d88a5'
                        },
                        {
                            offset: 1,
                            color: '#2cc4e9'
                        }
                    ]),
                    with: 10
                },
                symbol: 'circle', //折线点设置为实心点
                symbolSize: 8, //折线点的大小
                showSymbol: false, //折点显示
                // 折线拐点标志的样式
                itemStyle: {
                    color: '#33dcff',
                    shadowColor: '#99c35f',
                    // shadowBlur:20
                }
            }]
        };

        myChart.setOption(option);
    }

    //一周使用率
    OneWeekUsage = (_ele, _xData, _yData) => {
        this.disposeChart()
        this._ele = _ele
        var myChart = this._echart.init(this._ele) //初始化
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            toolbox: {
                show: false,
            },
            grid: {
                show: false,
                top: '20', //控制图标和上面的距离
                left: '14'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                // prettier-ignore
                data: _xData,
                axisLine: {
                    lineStyle: {
                        color: '#703dbe' //x轴的颜色
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { //坐标轴刻度标签相关设置
                    margin: 0,
                    formatter: '{value}\n',
                    inside: true,
                    color: "#5432a0"
                },
                axisPointer: {
                    snap: true
                },
                axisLine: {
                    lineStyle: {
                        color: 'none' //y轴的颜色 
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#402c74'] //分割线颜色
                    }
                }
            },

            series: [
                {
                    // name: 'aggie',
                    type: 'line',
                    smooth: true,
                    // prettier-ignore
                    data: _yData,
                    lineStyle: {
                        color: "#daaa44" //线颜色
                    },
                    itemStyle: {
                        color: "#fbb306", //折点颜色
                    },
                    areaStyle: {
                        color: "#f7e239", //折现下方填充
                        //渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(227,190,55,0.5)'
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(227,190,55,0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(227,190,55,0.1)'
                            }
                        ])
                    }
                },
                {
                    type:'effectScatter',
                    data:[50, 280, 500, 100, 270, 300, 550]       
                },
                // {
                //     type:'lines',
                //     data: {
                //         //coords:[['周一',50],['周二',280],['周三',500],['周四',100],['周五',270],['周六',300],['周日',550]]
                //         groupId:[50, 280, 500, 100, 270, 300, 550]
                //     }
                // }
            ]
        };

        option && myChart.setOption(option);
    }

    //警告排名  注意 数组的第一个，是排名的第10位
    warningTop = (_ele, _xData, _yData) => {
        this.disposeChart()
        this._ele = _ele
        var myChart = this._echart.init(this._ele) //初始化
        const option = {
            grid: {
                show: false,
                top: '0', //控制图标和上面的距离
                left: '18'
            },
            xAxis: {
                show: false,
            },
            yAxis: [{
                show: true,
                data: _xData,
                axisLine: {
                    show:false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show:false
                },
                axisLabel: {
                    //color: '#7337cd', // 字体颜色\
                    show:true,
                    color:"#fff",
                    inside:true,
                },
                z:1000
                
            }],
            series: [{
                type: 'bar',
                data: _yData,
                // 柱形渐变     
                itemStyle: {
                    color: function (params) {
                        if (params.dataIndex < 4) {
                            return new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                                    offset: 1,
                                    color: '#10f9ff'
                                },
                                {
                                    offset: 0.5,
                                    color: '#09e0ff'
                                },
                                {
                                    offset: 0,
                                    color: '#10beff'
                                }
                            ])
                        } else if (params.dataIndex >= 4 && params.dataIndex <= 6) {
                            return new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                                    offset: 1,
                                    color: '#fdc645'
                                },
                                {
                                    offset: 0.5,
                                    color: '#ffa722'
                                },
                                {
                                    offset: 0,
                                    color: '#ff7d05'
                                }
                            ])
                        } else if (params.dataIndex > 6) {
                            return new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                                    offset: 1,
                                    color: '#f79ebc'
                                },
                                {
                                    offset: 0.5,
                                    color: '#ee4d93'
                                },
                                {
                                    offset: 0,
                                    color: '#dd0978'
                                }
                            ])
                        }
                    },
                    borderRadius: [0, 10, 10, 0]
                },
                barWidth: "15", // 柱宽度
                // 柱背景
                showBackground: true,
                backgroundStyle: {
                    color: '#381d6c',
                    borderRadius: [0, 10, 10, 0]
                },
                label: {
                    show: true,
                    position: 'right',
                    color:"#fff",
                }
               
            }]
        }
        option && myChart.setOption(option);
    }

    //地图飞线
    getMap = (_ele,_data) => {
        this.disposeChart()
        this._ele=_ele
        this.myChart = this._echart.init(this._ele);
        this.myChart.setOption({
            amap: {
                maxPitch: 60,
                pitch: 10, //45 俯仰角
                viewMode: '3D',
                zoom: 8,
                expandZoomRange: true,
                zooms: [3, 20],
                mapStyle: 'amap://styles/10f4acdafb5f93d0aabe16804bc3c22e',
                center: [119.647265,29.079195],
                rotation: 0,
                resizeEnable: true,
            },
            animation: false,
            series:[]
        });
        var map = this.myChart.getModel().getComponent('amap').getAMap();
        var layer =this.myChart.getModel().getComponent('amap').getLayer(); 
        this.myChart.setOption({
            series: _data
        });

        layer.render = () => {
            this.myChart.setOption({
                series: _data
            });
        }
    }
    

    disposeChart = () => { //初始化chart实例
        if (this.myChart) {
            this.myChart.dispose()
            this.myChart = null
        }
    }

}